<template>
  <div id="comment">
    <img src="" alt="" />
    <div>
      <p class="replyer">
        {{ commentData.replyerName }}
        <span>评论了</span>
        <!-- <span class="time">{{item.}}</span> -->
      </p>
      <p class="commentContent">{{ commentData.commentsContent }}</p>
      <p class="rep_del">
        <span @click="display">回复</span>
        <span
          @click="del_com(commentData.id)"
          v-if="commentData.replyerId == this.userid"
          >删除</span
        >
      </p>
    </div>
    <template v-if="this.isReplyInputShow">
      <input type="text" class="replyText" v-model="comment" />
      <button @click="addReply">回复</button>
    </template>

    <template v-if="this.hasReply">
      <reply
        class="reply"
        v-for="(item, index) in this.replies"
        :key="index"
        :replyData="item"
        @update="update"
      >
      </reply>
    </template>
  </div>
</template>

<script>
import { Request } from "../until/request";
import reply from "./reply";
export default {
  name: "comment",
  props: ["commentData"],
  components: {
    reply
  },
  data() {
    return {
      hasReply: false,
      //放回复数据 用于渲染reply组件
      replies: [],
      isReplyInputShow: false,
      comment: "",
      //当前用户
      userid: 0
    };
  },
  computed: {},
  mounted() {
    this.userid = sessionStorage.getItem("userId");
  },
  methods: {
    //删除评论
    del_com(id) {
      let req = new Request();
      let formdata = new FormData();
      formdata.append("id", id);
      req
        .send("post", " api/api/comment/delete", formdata)
        .then(res => {
          if (res.data.code == 200) {
            console.log(res);
            this.update();
          }
        })
        .catch(err => {
          console.log(err);
        });
      // api/comment/delete
    },
    //显示回复框
    display() {
      this.isReplyInputShow = true;
    },
    update() {
      this.$emit("update");
    },
    clearReplies() {
      this.replies = [];
    },
    //处理回复数据
    processData(replies) {
      // replies:嵌套的回复数据
      // console.log(replies);

      this.hasReply = true;

      replies.forEach(el => {
        this.replies.push(el);
        //el.replies存在时 递归将回复数据压入this.replies
        //将嵌套的回复数据展开
        if (el.replies.length != 0) {
          this.processData(el.replies);
        }
      });
      console.log("process")
      console.log(this.replies);
    },
    //添加回复
    addReply(e) {
      let req = new Request();
      let formdata = new FormData();
      console.log(this.commentData);
      // dynamicStateId 整数 动 态 id
      formdata.append("dynamicStateId", this.commentData.dynamicStateId);
      // replyId 整数 回复的评论id
      formdata.append("replyId", this.commentData.id);
      // replyerId 整数 回 复 者 id
      formdata.append("replyerId", sessionStorage.getItem("userId"));
      // beReplyerId 整数 被回复者id
      formdata.append("beReplyerId", this.commentData.replyerId);

      // commentsContent String 评论内容
      formdata.append("commentsContent", this.comment);

      req
        .send("post", `/api/api/comment/reply`, formdata)
        .then(res => {
          console.log(res);
          this.comment = "";
          this.update();
          // this.request("post", "getReplyById");
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style  scoped>
#comment {
  /* background: lightblue; */
  width: 80%;
  margin: 0 auto 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  /* background: lightblue; */
}
.replyer {
  font-size: 1.1rem;
}
.replyer span {
  font-size: 0.8rem;
  font-style: italic;
  color: #999999;
}
.commentContent {
  padding: 0.4rem 0 1.2rem;
}
.rep_del span {
  font-size: 0.8rem;
  cursor: pointer;
  color: #999999;
}
.rep_del span:hover {
  color: black;
}
.replyText {
  border: 1px solid #cccccc;
  margin: 0.8rem 0.3rem 0 0;
  padding: 0 0.5rem;
  height: 2rem;
  width: 25rem;
}
.replyText + button {
  width: 2rem;
  height: 2rem;
  color: white;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  background: #4da6ff;
  cursor: pointer;
}
.replyText + button:hover {
  background: #007fff;
}
</style>